<template>
	<view class="text-detail-container">
		<!-- 帖子类型 -->
		<view class="post-type" v-if="textdetail.Category">
			{{ textdetail.Category.name }}
		</view>
	
		<!-- 帖子标题和信息 -->
		<view class="post-header">
			<view class="post-title">{{ textdetail.title }}</view>
			<view class="post-info">
				<view class="author-info">
					<view class="avatar">{{ textdetail.Author?.username?.charAt(0) || '用' }}</view>
					<view class="author-name">{{ textdetail.Author?.username || '匿名用户' }}</view>
				</view>
				<view class="post-meta">
					<text class="post-time">{{ formatDate(textdetail.createdAt) }}</text>
					<text class="post-stats">👍 {{ textdetail.likeCount || 0 }} · 💬 {{ textdetail.commentCount || 0 }}</text>
				</view>
			</view>
		</view>
	
		<!-- 帖子内容 -->
		<view class="post-content">
			<rich-text :nodes="formatContent(textdetail.content)"></rich-text>
		</view>
	
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-item" @click="handleLike">
				<text class="action-icon">👍</text>
				<text class="action-text">点赞</text>
			</view>
			<view class="action-item" @click="handleCollect">
				<text class="action-icon">⭐</text>
				<text class="action-text">收藏</text>
			</view>
			<view class="action-item" @click="handleShare">
				<text class="action-icon">📤</text>
				<text class="action-text">分享</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import http from '../../utils/request';
import { onLoad } from '@dcloudio/uni-app'

const id=ref('')
const textdetail=ref({})
const isLiked=ref(false)
const isCollected=ref(false)

// 格式化日期
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 格式化内容，处理列表等格式
function formatContent(content) {
  if (!content) return '';
  // 这里可以根据实际需要处理内容格式
  // 示例：将数字+点+空格的列表项转换为有序列表
  let formattedContent = content;
  
  // 处理数字列表
  formattedContent = formattedContent.replace(/(\d+)\.\s+(.*?)(?=\n|$)/g, '<ol><li>$2</li></ol>');
  
  // 处理标题行（以数字+点+空格+粗体文本开头）
  formattedContent = formattedContent.replace(/(\d+)\.\s+([^\n]+)/g, '<h3>$&</h3>');
  
  return formattedContent;
}

// 获取帖子详情
function getTextDetail(){
	http.get('/api/forum/posts/' + id.value).then(res => {
		console.log(res);
		textdetail.value = res.data.data
	})
}

// 点赞操作
function handleLike() {
	isLiked.value = !isLiked.value;
	// 这里可以添加点赞API调用
	uni.showToast({
		title: isLiked.value ? '点赞成功' : '取消点赞',
		icon: 'none'
	})
}

// 收藏操作
function handleCollect() {
	isCollected.value = !isCollected.value;
	// 这里可以添加收藏API调用
	uni.showToast({
		title: isCollected.value ? '收藏成功' : '取消收藏',
		icon: 'none'
	})
}

// 分享操作
function handleShare() {
	// 这里可以调用uni的分享API
	uni.showToast({
		title: '分享功能待实现',
		icon: 'none'
	})
}

onLoad((options) => {
	console.log(options);
	id.value = options.id
	getTextDetail()
})
</script>

<style scoped>
/* 全局容器样式 */
.text-detail-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 30rpx 20rpx;
}

/* 帖子类型样式 */
.post-type {
	width: fit-content;
	background-color: #e6f0ff;
	color: #2575fc;
	font-size: 28rpx;
	padding: 8rpx 20rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}

/* 帖子标题和信息样式 */
.post-header {
	background-color: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.post-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	margin-bottom: 20rpx;
}

.post-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.author-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #2575fc;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	margin-right: 15rpx;
}

.author-name {
	font-size: 28rpx;
	color: #333;
}

.post-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.post-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 5rpx;
}

.post-stats {
	font-size: 24rpx;
	color: #999;
}

/* 帖子内容样式 */
.post-content {
	background-color: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.post-content :deep(rich-text) {
	font-size: 32rpx;
	line-height: 1.8;
	color: #333;
}

.post-content :deep(p) {
	margin-bottom: 20rpx;
}

.post-content :deep(h3) {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	margin: 30rpx 0 20rpx 0;
}

.post-content :deep(ol) {
	padding-left: 60rpx;
	margin: 20rpx 0;
}

.post-content :deep(li) {
	margin-bottom: 10rpx;
	position: relative;
}

.post-content :deep(strong) {
	font-weight: bold;
}

.post-content :deep(a) {
	color: #2575fc;
	text-decoration: underline;
}

/* 底部操作栏样式 */
.action-bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: white;
	border-radius: 16rpx;
	padding: 30rpx 0;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120rpx;
}

.action-icon {
	font-size: 50rpx;
	margin-bottom: 10rpx;
}

.action-text {
	font-size: 26rpx;
	color: #666;
}

/* 交互效果 */
.action-item:active {
	opacity: 0.7;
}

/* 点赞和收藏高亮样式 */
.action-item.liked .action-icon {
	color: #ff4d4f;
}

.action-item.collected .action-icon {
	color: #ffaa00;
}
</style>
